<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    bankCard.
-->
<template>
  <div>
    <div class="EditReceiptAddress">
      <ul>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-tel"></i></div>
          <div class="fl w550">
            <!--<span>{{memberInfo.member_mobile}}</span>-->
            <input type="text" class="inp" placeholder="输入账号(手机号)" v-model="mobile">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-name"></i></div>
          <div class="fl w550">
            <input type="text" class="inp" placeholder="填写开户名" v-model="trueName">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-home"></i></div>
          <div class="fl w550">
            <input type="text" class="inp" placeholder="填写银行" v-model="bank_name">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-yinlian"></i></div>
          <div class="fl w550">
            <input type="text" class="inp" placeholder="填写开户行" v-model="bank">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-bankcard"></i></div>
          <div class="fl w550">
            <input type="text" class="inp" placeholder="填写银行卡号" v-model="bank_id">
          </div>
        </li>
        <!--<li class="login_ipt" style="position: relative; margin-bottom: 0; border-bottom: 1px solid #dcdddd">-->
          <!--<i class="iconfont icon-edit" style="position: absolute; top: 13px; left: 0.5rem; font-size: 14px;"></i>-->
          <!--<input type="text" placeholder="图形验证码" style="text-indent: 1.25rem;" v-model="imgCode">-->
          <!--<div style="position: absolute; right: 10px; top: 8px;width: 120px; height: 27px; line-height: 26px; border: 1px solid #aaa">-->
            <!--<img style="width: 90px; height: 26px;" :src="imgCodeSrc" alt="">-->
            <!--<span style=" position: absolute; right: 0; top: 0; display: inline-block; height: 26px; width: 30px; line-height: 26px;text-align: center" @click="getImgCode">刷新</span>-->
          <!--</div>-->
        <!--</li>-->
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="填写验证码" v-model="secode">
            <message-code :classes="'yanzm'" :sended-style="sendedStyle" :tel="mobile" :imgcode="imgCode" type="2" :sign="'0'" :callback="handleMessageCode"></message-code>
          </div>
        </li>
      </ul>
      <div class="pl20 pr20 mt35"><button type="button" class="but_1 wauto" @click="updatePwd">确定</button></div>
    </div>
    <back-nav></back-nav>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import messageCode from '../../components/message-code.vue'

  export default {
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        sendedStyle: {color: '#999999', border: '1px solid #999999'}, // 验证码发送后的验证码按钮样式
        mobile: '',
        pwd: '',
        secode: '',
        imgCode: '', // 图片验证码
        imgCodeSrc: '', // 图片验证码图片地址，
        trueName: '',
        bank: '',
        bank_id: '',
        bank_name: ''
      }
    },
    created() {
      this.mobile = this.memberInfo.member_mobile || ''
      this.imgCodeSrc = 'http://' + window.location.hostname + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
      this.trueName = this.memberInfo.bank_member_name
      this.bank = this.memberInfo.bank_deposit
      this.bank_id = this.memberInfo.bank_accoount
      this.bank_name = this.memberInfo.bank_name
    },
    components: {
      'message-code': messageCode
    },
    methods: {
      handleMessageCode(code) {
      },
      getImgCode() {
        this.imgCodeSrc = 'http://' + window.location.hostname + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
      },
      updatePwd() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入手机号')
          return
        }
        if (this.trueName == '') {
          this.$toast('请设置6位数字密码')
          return
        }
        if (this.secode == '') {
          this.$toast('请输入验证码')
          return
        }
        this.$request.memberEditBank(this.mobile, this.secode, this.trueName, this.bank_name, this.bank, this.bank_id).then(data => {
          this.$toast('设置成功')
          this.$router.push({name: 'setting-index'})
        }).catch(e => {
          this.$toast('设置失败:' + e.msg)
          console.error('修改失败', e)
        })
      }
    }
  }
</script>

<style>

</style>
